<template>
	<view class="goodsDetail">
		<view class="top_banner">
			<view class="top_bg">
				<u-image src="/static/tabbar/hd_bg.jpg" width="100%" height="687rpx"></u-image>
			</view>
			<view class="top_hd_info">
				<view class="hd_title">{{hdInfo.title}}</view>
				<view class="hd_date">活动时间</view>
				<view class="hd_date">{{hdInfo.start_time}}-{{hdInfo.end_time}}</view>
			</view>
			<view class="hd_rule_btn" @click="showIntro">
				
			</view>
			<view class="hd_share_btn" @click="showShare">
				
			</view>
			<view class="hd_intro" v-if="introShow">
				<rich-text :nodes="hdInfo.intro"></rich-text>
			</view>
		</view>
		<view class="hd_rule_sta" v-if="hdInfo.tp==1">
			<view class="has_close_tips" v-if="hdInfo.stainfo[0]==3">
				<view class="tit_center">活动已经结束</view>
				<view class="tips_center">
					<text>等待活动结果核算和星豆发放</text>
				</view>
			</view>
			<view class="has_on_tips" v-if="hdInfo.stainfo[0]==2">
				<view class="tit_center">活动进行中</view>
				<view class="tips_center">
					<text>参与活动达标，可以获得星豆奖励</text>
				</view>
			</view>
			<view class="has_noopen_tips" v-if="hdInfo.stainfo[0]==1">
				<view class="tit_center">未开始</view>
				<view class="tips_center">
					<text>活动即将开启，敬请期待</text>
				</view>
			</view>
		</view>
		<view class="hd_rule_sta" v-if="hdInfo.tp==2">
			<view class="has_close_tips" v-if="hdInfo.stainfo[0]==6">
				<view class="tit_center">{{hdInfo.stainfo[1]}}</view>
				<view class="tips_center">
					<text>{{hdInfo.stainfo[2]}}</text>
				</view>
				<view class="hd_lq_area" v-if="hdInfo.stainfo[3]==1">
					<view class="hd_lq_btn" @click="getZsGoods">选择赠品规格</view>
					<text>领取倒计时:{{clock}}</text>
				</view>
			</view>
			<view class="has_close_tips" v-if="hdInfo.stainfo[0]==5">
				<view class="tit_center">{{hdInfo.stainfo[1]}}</view>
				<view class="tips_center">
					<text>{{hdInfo.stainfo[2]}}</text>
				</view>
			</view>
			<view class="has_close_tips" v-if="hdInfo.stainfo[0]==4">
				<view class="tit_center">{{hdInfo.stainfo[1]}}</view>
				<view class="tips_center">
					<text>{{hdInfo.stainfo[2]}}</text>
				</view>
			</view>
			<view class="has_close_tips" v-if="hdInfo.stainfo[0]==3">
				<view class="tit_center">活动已经结束</view>
				<view class="tips_center">
					<text>您总计采购{{hdInfo.stainfo[1]}}套，可以获得{{hdInfo.stainfo[4]}}份赠品</text>
				</view>
			</view>
			<view class="has_on_tips" v-if="hdInfo.stainfo[0]==2">
				<view class="tit_center">您已采购{{hdInfo.stainfo[1]}}套</view>
				<view class="tips_center">
					<text v-if="hdInfo.stainfo[1]<hdInfo.stainfo[2]">还需要采购{{hdInfo.stainfo[2]-hdInfo.stainfo[1]}}套达到下一目标</text>
					<text v-else>已完成，等待活动结束</text>
				</view>
				<view class="pintuan_tips">
					<text>{{hdInfo.stainfo[1]}}套</text>
				</view>
				<view class="pin_line_bar">
					<view class="pin_line_inner" :style="{ width: hdInfo.stainfo[6] + '%' }"></view>
				</view>
			</view>
			<view class="has_noopen_tips" v-if="hdInfo.stainfo[0]==1">
				<view class="tit_center">未开始</view>
				<view class="tips_center">
					<text>活动即将开启，敬请期待</text>
				</view>
			</view>
		</view>
		<view class="hd_rule_sta" v-if="hdInfo.tp==3">
			<view class="has_close_tips" v-if="hdInfo.stainfo[0]==6">
				<view class="tit_center">{{hdInfo.stainfo[1]}}</view>
				<view class="tips_center">
					<text>{{hdInfo.stainfo[2]}}</text>
				</view>
				<view class="hd_lq_area" v-if="hdInfo.stainfo[3]==1">
					<view class="hd_lq_btn" @click="getZsGoods">选择赠品规格</view>
					<text>领取倒计时:{{clock}}</text>
				</view>
			</view>
			<view class="has_close_tips" v-if="hdInfo.stainfo[0]==5">
				<view class="tit_center">{{hdInfo.stainfo[1]}}</view>
				<view class="tips_center">
					<text>{{hdInfo.stainfo[2]}}</text>
				</view>
			</view>
			<view class="has_close_tips" v-if="hdInfo.stainfo[0]==4">
				<view class="tit_center">{{hdInfo.stainfo[1]}}</view>
				<view class="tips_center">
					<text>{{hdInfo.stainfo[2]}}</text>
				</view>
			</view>
			<view class="has_close_tips" v-if="hdInfo.stainfo[0]==3">
				<view class="tit_center">活动已经结束</view>
				<view class="tips_center">
					<text>您总计推荐{{hdInfo.stainfo[1]}}人，可以获得{{hdInfo.stainfo[4]}}星豆</text>
				</view>
			</view>
			<view class="has_on_tips" v-if="hdInfo.stainfo[0]==2">
				<view class="tit_center">您已推荐{{hdInfo.stainfo[1]}}人</view>
				<view class="tips_center">
					<text v-if="hdInfo.stainfo[1]<hdInfo.stainfo[2]">还需要推荐{{hdInfo.stainfo[2]-hdInfo.stainfo[1]}}人达到下一目标</text>
					<text v-else>已完成，等待活动结束</text>
				</view>
				<view class="pintuan_tips">
					<text>{{hdInfo.stainfo[1]}}人</text>
				</view>
				<view class="pin_line_bar">
					<view class="pin_line_inner" :style="{ width: hdInfo.stainfo[6] + '%' }"></view>
				</view>
			</view>
			<view class="has_noopen_tips" v-if="hdInfo.stainfo[0]==1">
				<view class="tit_center">未开始</view>
				<view class="tips_center">
					<text>活动即将开启，敬请期待</text>
				</view>
			</view>
		</view>
		<view class="hd_rule_sta" v-if="hdInfo.tp==4">
			<view class="has_close_tips" v-if="hdInfo.stainfo[0]==6">
				<view class="tit_center">{{hdInfo.stainfo[1]}}</view>
				<view class="tips_center">
					<text>{{hdInfo.stainfo[2]}}</text>
				</view>
				<view class="hd_lq_area" v-if="hdInfo.stainfo[3]==1">
					<view class="hd_lq_btn" @click="getZsGoods">选择赠品规格</view>
					<text>领取倒计时:{{clock}}</text>
				</view>
			</view>
			<view class="has_close_tips" v-if="hdInfo.stainfo[0]==5">
				<view class="tit_center">{{hdInfo.stainfo[1]}}</view>
				<view class="tips_center">
					<text>{{hdInfo.stainfo[2]}}</text>
				</view>
			</view>
			<view class="has_close_tips" v-if="hdInfo.stainfo[0]==4">
				<view class="tit_center">{{hdInfo.stainfo[1]}}</view>
				<view class="tips_center">
					<text>{{hdInfo.stainfo[2]}}</text>
				</view>
			</view>
			<view class="has_close_tips" v-if="hdInfo.stainfo[0]==3">
				<view class="tit_center">活动已经结束</view>
				<view class="tips_center">
					<text>您的直推人共计采购{{hdInfo.stainfo[1]}}套，可以获得{{hdInfo.stainfo[4]}}套</text>
				</view>
			</view>
			<view class="has_on_tips" v-if="hdInfo.stainfo[0]==2">
				<view class="tit_center">您的直推人已采购{{hdInfo.stainfo[1]}}套</view>
				<view class="tips_center">
					<text v-if="hdInfo.stainfo[1]<hdInfo.stainfo[2]">还需要采购{{hdInfo.stainfo[2]-hdInfo.stainfo[1]}}套达到下一目标</text>
					<text v-else>已完成，等待活动结束</text>
				</view>
				<view class="pintuan_tips">
					<text>{{hdInfo.stainfo[1]}}套</text>
				</view>
				<view class="pin_line_bar">
					<view class="pin_line_inner" :style="{ width: hdInfo.stainfo[6] + '%' }"></view>
				</view>
			</view>
			<view class="has_noopen_tips" v-if="hdInfo.stainfo[0]==1">
				<view class="tit_center">未开始</view>
				<view class="tips_center">
					<text>活动即将开启，敬请期待</text>
				</view>
			</view>
		</view>
		<view class="hd_goods">
			<view class="hd_goods_item" v-for="(item, index) in hdGoods" @click="jumpPage(item.goods_id)">
				<view class="hd_goods_thumb"><u-lazy-load threshold="-450" :image="item.goods_image" :index="index"></u-lazy-load></view>
				<view class="hd_goods_info">
					<view class="hd_goods_tit">{{item.goods_name}}</view>
					<text v-if="item.q_id == '1'">¥{{item.goods_min_price}}</text>
					<text v-if="item.q_id == '2'">¥{{item.goods_min_price}}+{{item.goods_min_point}}券</text>
					<text v-if="item.q_id == '3'">¥{{item.goods_min_price}}</text>
				</view>				
			</view>
		</view>
		<view class="hd_content">
			<u-parse :html="htmlNode"></u-parse>
		</view>
		<u-popup v-model="showModel" mode="center" width="80%" height="80%" :border-radius="20">
			<view class="myextension">
				<block class="mycanvas">
					<image class="imgs" style="width:280px;height:400px" :src="imgUrl" mode=""></image>
				</block>
				<!-- #ifdef APP-PLUS -->
				<view class="saveImg" @tap="saveImg" style="background:#20cbd4">保存海报</view>
				<view class="saveImg1" @tap="changeCode" style="background:#20cbd4">{{btnMsg}}</view>
				<!-- #endif -->
				<!-- #ifdef MP -->
				<button v-if="album" class="saveImg" type='primary' open-type="openSetting">去授权</button>
				<view class="saveImg" @tap="saveImg" style="background:#20cbd4">保存海报</view>
				<!-- #endif -->
				<!-- #ifdef H5 -->
				<p class="tips">长按图片进行保存</p>
				<!-- #endif -->
			</view>
		</u-popup>
		<u-toast ref="uToast" />
		<login-model ref="loginModel"></login-model>
		<u-modal v-model="modelShow" title="授权提醒" content="还未授权微信支付,是否授权？" @confirm="authorization" :show-cancel-button="true"></u-modal>
		<view class="hdGoodsMask" v-if="zsGoodsSta" @click="hideSku">
		</view>
		<view class="hd_zs" v-if="zsGoodsSta">
			<view class="tips_huodong">请选择活动赠品</view>
			<view class="address_box" @click="chooseAddress">
				<u-section v-if="address_id<1||address== undefined || address.length <= 0" :bold="false" :show-line="false" 
				:arrow="true" :right="false" sub-title="" sub-color="#000" 
				title="请选择收货地址" 
				color="#909399"></u-section>
				<view v-else> 
					<view class="addressDetail" style="margin-bottom: 20rpx;">
						<text class="userInfo">{{address.real_name}}</text>
						<text class="userInfo">{{address.phone}}</text>
						<u-tag v-if="address.is_default == '1'" class="userInfo" bg-color="#20cbd4" text="默认" size="mini" mode="dark" />
					</view>
					<view class="addressDetail">{{address.province}}{{address.city}}{{address.district}}{{address.detail}}</view>
				</view>
			</view>
			<view class="huodong_zs_item" @click="chkZs" v-for="(goodsInfo, index) in hdgoods" :key="index" :data-id="goodsInfo.goods_id">
				<view class="huodong_zs_inner checked" v-if="zsgoodsid==goodsInfo.goods_id">
					<view class="hd_goods_img">
						<image :src="goodsInfo.goods_image"></image>
					</view>
					<view class="hd_goods_infox">
						<view class="goods_tit u-line-2">{{goodsInfo.goods_name}}</view>
					</view>
				</view>
				<view class="huodong_zs_inner" v-else>
					<view class="hd_goods_img">
						<image :src="goodsInfo.goods_image"></image>
					</view>
					<view class="hd_goods_infox">
						<view class="goods_tit u-line-2">{{goodsInfo.goods_name}}</view>
					</view>
				</view>
			</view>
			<view class="hdGoodSku" v-if="zsSkuShow">
				<view class="norm_item" v-for="(item, index) in skuList" :key="index">
					<view class="goods_tit">{{item.group_name}}</view>
					<u-radio-group v-model="item.title" shape="square" active-color="#20cbd4" style="width:100%;min-height: 0;overflow: hidden;">
						<u-radio 
							v-for="(item1, index1) in item.spec_items" :key="index1" :name="item1.spec_value" @change="normChangex(index,index1,item1.spec_value)">
							{{item1.spec_value}}
						</u-radio>
					</u-radio-group>
				</view>
				<view class="hdGoodsTips">
					当前赠品为多规格商品，可以手动选择对应规格.
				</view>
			</view>
			<view class="hdgoodsBtn" @click="chkZsGoods">确定</view>
		</view>
	</view>
</template>

<script>
	import loginModel from "@/components/public/loginModel.vue";
	import empty from "@/components/public/empty.vue";
	import {getCxInfo,isLogin,cuxiaoBanner,setZsGoods} from "@/common/api.js";
	export default {
		components: {
			empty,
			loginModel
		},
		data() {
			return { 
				album:false,
				introShow:false,
				modelShow:false,
				zsgoodsid:0,
				zsgoodskuid:0,
				avatarList:[],
				isEmpty:false,
				emptyImg:getApp().globalData.imageUrl+"empty_goods.png",
				emptyTxt:"暂无评价信息～",
				hdInfo:{},
				extra:{},
				clock:"",
				hdGoods:[],
				file_url:"",//规格中图片
				price:0,//规格中的价格
				stock:999,//规格中的库存
				point:0,//规格中的券(优选区)
				htmlNode:"",//商品详情
				commentList:[],//评论列表
				goodsDetailInfo:{},
				footerList:[
					{icon:"/static/tabbar/tab_home_sel.png",name:"首页"},
					{icon:"https://yunxingzhan.oss-cn-hangzhou.aliyuncs.com/miniprogram/images/images/favorite.png",name:"收藏"},
					{icon:"https://yunxingzhan.oss-cn-hangzhou.aliyuncs.com/miniprogram/images/images/share.png",name:"分享"},
				],
				tabsList: [{
					name: '活动详情'
				}],
				current: 0,
				customStyle:{
					color:"#20cbd4",
					border:"5rpx #20cbd4",
					marginBottom:"10rpx"
				},
				confrimStyle:{
					color:"#f5fdfe",
					border:"5rpx #20cbd4",
					background:"#20cbd4",
					marginBottom:"10rpx"
				},
				showPopup:false,
				popupType:1,
				popNumber:1,
				skuList:[],
				ids:"",//规格选中的ids
				goodsNorms:"",//规格选中的名称
				status: 'loadmore',
				pageSize: 10,
				pageStart: 1,
				total:0,
				showModel:false,
				imgUrl:"", //分享图片
				show:false,
				btnType:0,
				intervarID:null,
				zsGoodsSta:false,
				zsSkuShow:false,
				hdgoods:[],
				address:{},
				address_id:0,
				hdid:0,
				btnMsg:"转为小程序码"
			}
		},
		onLoad(option) {
			// #ifdef MP
			this.btnType=1;
			// #endif
			uni.setNavigationBarColor({  
			    frontColor: '#ffffff',  
			    backgroundColor: '#E40001' 
			})
			console.log('option',option);
			//海报识别
			if(option.scene){
				let scene = decodeURIComponent(option.scene)
				if(scene.indexOf('&')>0){
					let qs = scene.split('&')
					let query = []
					qs.forEach((value)=>{
						console.log(value)
						let kv = value.split('=')
						query[kv[0]] = kv[1]
					})
					if(query['hdid']){
						option.hdid = query['hdid']
					}
					if(query['spread_code']){
						option.spread_code = query['spread_code']
					}
				}
			}
			var hdid=option.hdid;
			this.hdid=hdid;
			this.getHdInfo(hdid);
			if(option.spread_code){
				uni.setStorageSync('spread_code', option.spread_code);
			}			
		},
		onShow() {
			//判断选择地址
			let address = uni.getStorageSync('address')|| '';
			if(address != ''){
				console.log('address',address);
				this.address=address;
				this.address_id = address.id;
			}
		  },
		onHide() {
			this.album=false
		},
		methods: {
			goback(){
				uni.navigateBack({
					delta:1
				})
			},
			chooseAddress(){
				uni.setStorageSync("adType","select");
				uni.navigateTo({
					url: '/user/address?type=select'
				 });
			},
			jumpPage(id){
				uni.navigateTo({
				  url: '/goods/goodsDetail?goods_id='+id
				});
			},
			chkDeal(data){
				console.log('data',data);
				uni.showToast({
					title: data.msg,
					icon: 'success', 
					icon: true
				});
				var hdid=this.hdid;
				this.getHdInfo(hdid);
			},
			chkZsGoods(){
				var goodsSkuid=this.zsgoodskuid;
				var address_id=this.address_id;
				console.log('goodsSkuid',goodsSkuid);
				if(goodsSkuid>0&&address_id>0){
					var hdid=this.hdid;
					setZsGoods(this,{'skuid':goodsSkuid,'hdid':hdid,'aid':address_id});
					this.hideSku();
				}else{
					uni.showToast({
						title: '请选择赠品规格',
						icon: 'fail', 
						icon: true
					});
				}
			},
			chkZs(e){
				var goodsid=e.currentTarget.dataset.id;
				if(goodsid>0){
					this.zsgoodsid=goodsid;
					var goodsList=this.hdgoods;
					for(var i in goodsList){
						var goods=goodsList[i];
						
						if(goods.goods_id==goodsid){
							this.goodsInfo=goods;
							this.zsgoodskuid=goods.goods_sku.goods_sku_id;
							if(goods.spec_type==2){
								this.skuList=goods.goods_multi_spec.spec_attr;
								this.zsSkuShow=true;
							}else{
								this.skuList={};
								this.zsSkuShow=false;
							}
							console.log('zsSku',this.skuList,this.zsgoodskuid);
						}
					}
				}
			},
			hideSku(){
				this.zsGoodsSta=false;
			},
			normChangex(groupIdx,redioIdx,redioName){
				this.skuList[groupIdx].title=redioName;
				this.skuList[groupIdx].spec_items[redioIdx].is_check=true;
				for(var i=0;i<this.skuList[groupIdx].spec_items.length;i++){
					if(this.skuList[groupIdx].title!=this.skuList[groupIdx].spec_items[i].spec_value){
						this.skuList[groupIdx].spec_items[i].is_check=false;
					}
				}
				var that=this;
				var ids = [];
				var goodsNorms = [];
				for (var i in that.skuList) {
					for (var j in that.skuList[i].spec_items) {
						if(that.skuList[i].spec_items[j].is_check == true){
							ids.push(that.skuList[i].spec_items[j].item_id)
							goodsNorms.push(that.skuList[i].spec_items[j].spec_value)
						}
					}
				}
				
				that.goodsNorms = goodsNorms;
				//把逗号变为下划线
				var id = ids.toString().replace(",","_");
				that.ids = id;
				var spec_list = that.goodsInfo.goods_multi_spec.spec_list;
				for(var m in spec_list){
					if(spec_list[m].spec_sku_id == id){
						console.log(spec_list[m],'spec_list');
						this.zsgoodskuid=spec_list[m].goods_sku_id;
					}
				}
				console.log('zsSku2',this.skuList,this.zsgoodskuid);
			},
			showIntro(){
				let introShow=this.introShow;
				this.introShow=!introShow;
			},
			showShare(){
				//分享
				isLogin(this,{type:3});
				cuxiaoBanner(this,{hdid:this.hdInfo.id,type:this.btnType})
			},
			floatTouchClick(index){
				this.$uniApi.floatTouch(index);
			},
			getHdInfo(hdid){
				console.log('getCxInfo',hdid);
				getCxInfo(this,{'id':hdid});
			},
			hdinfoDeal(){
				var hdInfo=this.hdInfo;
				console.log('hdInfo',hdInfo);
				if(hdInfo.tp>1&&hdInfo.stainfo[0]==6&&hdInfo.stainfo[3]==1){
					this.djsTime=parseInt(hdInfo.stainfo[4]);
					this.djs();
				}
			},
			djs(){
				var that=this;
				this.intervarID= setInterval(function () {
					var leftTime = that.djsTime ; //计算剩余的毫秒数
					if(leftTime>0){
						leftTime-=1;
						that.djsTime=leftTime;
						var days = parseInt(leftTime  / 60 / 60 / 24, 10); //计算剩余的天数
						var hours = parseInt(leftTime  / 60 / 60 % 24, 10); //计算剩余的小时
						var minutes = parseInt(leftTime / 60 % 60, 10);//计算剩余的分钟
						var seconds = parseInt(leftTime % 60, 10);//计算剩余的秒数
						var str_data=[];
						if(days>0){
							str_data.push(days + "天");
						}
						if(hours>0){
							str_data.push(hours + "小时");
						}
						if(minutes>0){
							str_data.push(minutes + "分");
						}
						if(seconds>0){
							str_data.push(seconds + "秒");
						}
						that.clock=str_data.join('')
					}else{
						clearInterval(that.intervarID);
					}
				}, 1000
				)
			},
			setFrom(html) {
				//处理富文本 让图片居中适应
				let newContent = html.replace(/\<img/gi, '<img class="rich-img" ');
				this.htmlNode = newContent
			},
			getZsGoods(){
				var hdInfo=this.hdInfo;
				var leftTime = this.djsTime ; //计算剩余的毫秒数
				console.log('hdInfo',hdInfo);
				if(hdInfo.tp==2&&hdInfo.stainfo[0]==6&&hdInfo.stainfo[3]==1){
					if(leftTime>0){
						this.zsGoodsSta=true;
						uni.showToast({
							title: '请选择赠品规格',
							icon: 'success', 
							icon: true
						});
					}else{
						uni.showToast({
							title: '已过期无法领取',
							icon: 'fail', 
							icon: true
						});
					}
				}else if(hdInfo.tp==3&&hdInfo.stainfo[0]==6&&hdInfo.stainfo[3]==1){
					if(leftTime>0){
						this.zsGoodsSta=true;
						uni.showToast({
							title: '请选择赠品规格',
							icon: 'success', 
							icon: true
						});
					}else{
						uni.showToast({
							title: '已过期无法领取',
							icon: 'fail', 
							icon: true
						});
					}
				}else if(hdInfo.tp==4&&hdInfo.stainfo[0]==6&&hdInfo.stainfo[3]==1){
					if(leftTime>0){
						this.zsGoodsSta=true;
						uni.showToast({
							title: '请选择赠品规格',
							icon: 'success', 
							icon: true
						});
					}else{
						uni.showToast({
							title: '已过期无法领取',
							icon: 'fail', 
							icon: true
						});
					}
				}else{
					uni.showToast({
						title: '当前状态无法领取',
						icon: 'fail', 
						icon: true
					});
				}
			},
			clickImg(index){
			},
			saveImg(url,that){
				uni.downloadFile({
					url:url,
					success: (res) => {
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: function () {
								uni.showToast({
									title: '保存成功',
									icon: 'success', 
									icon: true
								});
							}
						});
					}
				});
			},
			clickCoupon(){
				uni.navigateTo({
				  url: '/goods/coupon'
				});
			},
			change(index) {
				this.current = index;
				if(index == 1){
					this.pageStart = 1;
					this.commentList = [];
					this.selectCommentList();
				}
			},
			iconClick(index){
				if(index==0){
					uni.switchTab({
						url:"/pages/tabBar/home"
					})
				}else if(index==2){
					//分享
					isLogin(this,{type:3});
					cuxiaoBanner(this,{hdid:this.hdInfo.id,type:this.btnType})
				}
			},
			changeCode(){
				this.imgUrl=""
				if(this.btnType == 0){
					this.btnType = 1
					this.btnMsg = "转为二维码"
				}else{
					this.btnType = 0
					this.btnMsg = "转为小程序码"
				}
				cuxiaoBanner(this,{hdid:this.hdInfo.id,type:this.btnType})
			},
			//收藏
			saveCollection(){
				collect(this,{goods_id:this.goodsInfo.goods_id,category:this.goodsInfo.category_id,q_id:this.goodsInfo.q_id});
			},
			authorization(){
				uni.navigateTo({
					url:"/pages/views/authorization?state="+this.goodsInfo.goods_id,
					success() {
						this.$u.toast("未授权微信公众号支付，请点击授权")
					}
				})
			},
			//index:1=加入购物车；2=立即购买/立即秒杀/单独购买；3=选择规格；4=我要开团
			showGoodsPopup(index){
				// #ifdef H5
					let ua = window.navigator.userAgent.toLowerCase()
					if (ua.match(/MicroMessenger/i) == 'micromessenger') {
						if(uni.getStorageSync("openidGzh")==null||uni.getStorageSync("openidGzh")==""){
							this.modelShow=true
						}
					}
				// #endif
				isLogin(this,{type:2});
				this.popupType=index;
				if(this.goodsInfo.spec_type == 1){
					if(this.goodsInfo.q_id == 1){
						this.price = this.goodsInfo.goods_sku.goods_price;//规格中的价格
					}else if(this.goodsInfo.q_id == 2){
						this.price = this.goodsInfo.goods_sku.price;//规格中的价格
						this.point = this.goodsInfo.goods_sku.points;//规格中的券(优选区)
					}
					this.stock = this.goodsInfo.goods_sku.stock_num;//规格中的库存
					this.ids = this.goodsInfo.goods_sku.spec_sku_id;
				}
			},
			normChange(groupIdx,redioIdx,redioName){
				this.skuList[groupIdx].title=redioName;
				this.skuList[groupIdx].spec_items[redioIdx].is_check=true;
				for(var i=0;i<this.skuList[groupIdx].spec_items.length;i++){
					if(this.skuList[groupIdx].title!=this.skuList[groupIdx].spec_items[i].spec_value){
						this.skuList[groupIdx].spec_items[i].is_check=false;
					}
				}
				this.changePrice();
			},
			//处理价格
			changePrice(){
				var that = this;
				var flag = true;
				//如果存在规格未选中的值，直接返回
				for (var i in that.skuList) {
					if (that.skuList[i].title == '') {
						flag = false;
						return; //如果数组里有为空的值，那直接返回true
					}
				}
				if(flag){
					//把选中的id放在数组中
					var ids = [];
					var goodsNorms = [];
					for (var i in that.skuList) {
						for (var j in that.skuList[i].spec_items) {
							if(that.skuList[i].spec_items[j].is_check == true){
								ids.push(that.skuList[i].spec_items[j].item_id)
								goodsNorms.push(that.skuList[i].spec_items[j].spec_value)
							}
						}
					}
					
					that.goodsNorms = goodsNorms;
					//把逗号变为下划线
					var id = ids.toString().replace(",","_");
					that.ids = id;
					var spec_list = that.goodsInfo.goods_multi_spec.spec_list;
					for(var m in spec_list){
						if(spec_list[m].spec_sku_id == id){
							if(that.goodsInfo.q_id == '1'){
								that.price = spec_list[m].form.goods_price;
							}else if(that.goodsInfo.q_id == '2'){
								that.price = spec_list[m].form.price;
								that.point = spec_list[m].form.point;
							}
							that.stock = spec_list[m].form.stock_num;
						}
					}
				}
			},
			confrimClick(){
				if(this.goodsInfo.spec_type == 2){
					for(var i=0;i<this.skuList.length;i++){
						if(this.skuList[i].title==''){
							this.$refs.uToast.show({title: '请选择'+this.skuList[i].group_name+'规格'});
							return;
						}
					}
				}
				this.showPopup=false;
				if(this.popNumber>this.stock){
					this.$refs.uToast.show({title: '库存不足'});
					return;
				}
				if(this.popupType==1){
					addCart(this,{type:1,goods_id:this.goodsInfo.goods_id,goods_sku_id:this.ids,goods_num:this.popNumber,updateType:0});
				}else if(this.popupType==2){
					var obj={};
					obj.goods_id=this.goodsInfo.goods_id;
					obj.goods_sku_id=this.ids;
					obj.goods_num=this.popNumber;
					obj.price=this.price;
					obj.type=0;
					uni.navigateTo({
					  url: '/goods/confrimOrder?param='+JSON.stringify(obj)
					});
				}else if(this.popupType==3){
					console.log("选择规格,数量为"+this.popNumber)
				}
			},
			saveImg() {
				//保存图片
				uni.showLoading({
					title: '保存中...'
				});
				let _this = this;
				// #ifdef MP
				uni.getSetting({
					success(res) {
						console.log(_this.imgUrl)
						uni.getImageInfo({
							src:_this.imgUrl,
							success(res) {
								var path=res.path;
								uni.saveImageToPhotosAlbum({
									filePath: path,
									success(re) {
										uni.hideLoading();
										uni.showToast({
											title: '保存成功',
											icon: 'success'
										});
									},
									fail(err) {
										_this.album=true
										console.log(JSON.stringify(err))
										uni.showToast({
											title: '未授权',
											icon: 'none'
										});
									}
												
								});
							},
						})
					}
				});
				// #endif
				// #ifdef APP-PLUS
				setTimeout(() => {
					uni.saveImageToPhotosAlbum({
						filePath: this.imgUrl,
						success(re) {
							uni.hideLoading();
							uni.showToast({
								title: '保存成功',
								icon: 'success'
							});
						},
						fail(err) {
							uni.showToast({
								title: '保存失败',
								icon: 'none'
							});
						}
									
					});
				}, 1000);
				// #endif
			}
		}
	}
</script>

<style>
	page{
		font-family: PingFang SC;
		background: #E40001;
	}
	.top_banner{
		width:656rpx;height: 687rpx;margin:30rpx auto;position: relative;
	}
	.hd_goods{width:656rpx;min-height:0;overflow: hidden;margin:0 auto;padding-bottom: 10rpx;}
	.hd_goods_item{position: relative;min-height:100rpx;overflow: hidden;padding:15rpx;margin-bottom:20rpx;background:#fff;border-radius: 6rpx;}
	.hd_goods_thumb{position: absolute;left:15rpx;top:15rpx;background:#ddd;height:100rpx;width:100rpx;}
	.hd_goods_info{margin-left:115rpx;min-height:100rpx;}
	.hd_goods_info .hd_goods_tit{font-size:28rpx;line-height:30rpx;padding-bottom: 10rpx;}
	.hd_goods_info text{line-height:30rpx;font-weight: bold;color:#fa3534;}
	.top_bg{width:100%;height:687rpx;position: absolute;top:0;right:0;right:0;z-index: 1;}
	.top_hd_info{position: absolute;z-index: 2;top:80rpx;left:40rpx;right:40rpx;bottom:0;text-align: center;}
	.top_hd_info .hd_title{line-height: 70rpx;font-size:36rpx;color:#FF3F00;font-weight: bold;}
	.top_hd_info .hd_date{font-size:28rpx;line-height:46rpx;color: #999;}
	.hd_rule_btn{position: absolute;width:126rpx;height: 40rpx;z-index: 3;left:44rpx;top:11rpx}
	.hd_share_btn{position: absolute;width:550rpx;height: 92rpx;z-index: 4;left:50%;bottom:60rpx;margin-left:-275rpx}
	.hd_intro{position: absolute;left:44rpx;right:44rpx;top:56rpx;padding:20rpx;background:rgba(0,0,0,0.5);color:#fff;line-height: 50rpx;font-size:28rpx;min-height: 0;overflow: hidden;z-index: 5;border-radius: 6rpx;}
	.hd_content{width:656rpx;min-height: 0;overflow: hidden;margin:0 auto;background-color: #fff;padding:20rpx;border-radius: 20rpx;width:656rpx;min-height: 0;overflow: hidden;margin-bottom: 30rpx;}
	.hd_rule_sta{width:656rpx;min-height: 0;overflow: hidden;margin:0 auto;background-color: #fff;padding:20rpx;border-radius: 20rpx;width:656rpx;min-height: 0;overflow: hidden;margin-bottom: 30rpx;}
	
	.address_box{
		padding:0 20rpx 20rpx 20rpx;
		background-color: #fff;
	}
	.userInfo{
		display:inline-block;float:left;margin-right: 10rpx;font-weight: bold;color: #222;
	}
	.addressDetail{
		min-height: 0;overflow: hidden;
		color: #909399;
	}
	.pintuan_info{margin:80rpx 20rpx 20rpx 20rpx;background:#FFF;min-height: 400rpx;border-radius: 20rpx;}
	.pintuan_top01{
		text-align: center;height:80rpx;padding:70rpx 0 14rpx 0;color:#EB4343;font-size:40rpx;font-weight: bold;
	}
	.goods_hd{width:100%;min-height: 0;overflow: hidden;margin-top:20rpx}
	.goods_hd text{display: inline-block;background:red;color:#fff;font-size:24rpx;height:34rpx;padding-right:10rpx;border-radius: 5rpx;}
	
	.hd_zs{position: fixed;bottom:0;left:0;right:0;padding:40rpx;background-color: #fff;z-index: 999;border-radius: 20rpx 20rpx 0 0 ;}

	.tips_huodong{height: 90rpx;line-height:60rpx;color: #222;font-size:36rpx;font-weight: bold;}
	.huodong_zs_item{margin:10rpx;min-height: 90rpx;overflow: hidden;}
	.huodong_zs_inner{border:4rpx solid #f1f1f1;position: relative;background:#fff;}
	.checked{border-color: #f60;}
	.hd_goods_img{height:90rpx;width:90rpx;position: absolute;left:0;top:0;}
	
	.hd_goods_img image{
		width: 100%;
		height: 100%;
	}
	.hd_goods_infox{margin-left:100rpx;height:90rpx;padding:10rpx;line-height: 70rpx;font-size: 24rpx;overflow: hidden;}
	
	
	.hdGoodsMask{position: fixed;bottom:0;left:0;right:0;top:0;background-color: rgba(0,0,0,0.5);z-index: 99;}
	.hdGoodSku{min-height: 0;overflow: hidden;}
	.hdGoodsTips{padding:20rpx 0}
	.hdgoodsBtn{position: absolute;right:30rpx;top:40rpx;width:120rpx;height:60rpx;line-height: 60rpx;font-size: 28rpx;text-align: center;color: #fff;background-color: green;border-radius: 9rpx;}
	.norm_item{
		padding: 20rpx 0;display: block;width: 100%;
	}
	.goods_tit{font-size: 30rpx;}
	
	.tit_center{font-size:40rpx;line-height: 70rpx;color:#333;text-align: center;}
	.tips_center{font-size: 28rpx;line-height: 50rpx;text-align: center;color:#999}
	.pintuan_top01 text{font-size:60rpx;padding:0 10rpx}
	.pintuan_tips{
		width:200rpx;height:100rpx;background:url('/static/tabbar/pin_tips.png') no-repeat center center;
		background-size: 100% auto;
		margin:0 auto;
		text-align: center;
	}
	.pintuan_tips text{font-size: 24rpx;color:#fff;display: inline-block;height:50rpx;line-height:50rpx;margin-top:24rpx}
	.pin_line_bar{width:520rpx;height:30rpx;background:#E5E5E5;border-radius: 30rpx;margin:0 auto;}
	.pin_line_inner{
		height:30rpx;float:left;
		border-radius: 30rpx;
		background-color: rgb(237,111,76);
		background-image: inear-gradient( 90deg, rgb(243,179,62) 0%, rgb(237,111,76) 100%);
		background-image: -moz-linear-gradient( 90deg, rgb(243,179,62) 0%, rgb(237,111,76) 100%);
		background-image: -webkit-linear-gradient( 90deg, rgb(243,179,62) 0%, rgb(237,111,76) 100%);
		background-image: -ms-linear-gradient( 90deg, rgb(243,179,62) 0%, rgb(237,111,76) 100%);
	}
	.hd_lq_area{min-height: 0;overflow: hidden;text-align: center;}
	.hd_lq_area text{color:#222;font-size: 28rpx;line-height: 40rpx;}
	.hd_lq_btn{width:300rpx;height:80rpx;background:green;color:#fff;font-size:32rpx;line-height: 80rpx;margin:20rpx auto;border-radius: 80rpx;}
	
	.detailImg{
		height: 600rpx;
	}
	.price_box{
		padding: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #fff;
		font-size: 30rpx;
	}
	.price_txt{
		display: flex;
	}
	.price_txt view{
		font-size: 25rpx;
		margin-right: 20rpx;
	}
	.price_txt text{
		margin: 0 10rpx;
		font-size: 40rpx;
		font-size: 600;
	}
	.u_price{
		text-decoration: line-through;
		line-height: 70rpx;
	}
	.goods_info{
		padding: 20rpx;
		background-color: #fff;
		margin-bottom: 10rpx;
	}
	.goods_tit{
		font-size: 30rpx;
		margin-bottom: 15rpx;
	}
	.goods_remark{
		color: #0e595d;
	}
	.norms{
		padding: 20rpx;
		background-color: #fff;
		margin-bottom: 10rpx;
		display: flex;
		align-items: center;
	}
	.norms view{
		display: flex;
		align-items: center;
	}
	.norms view image{
		width: 40rpx;
		height: 40rpx; 
		margin-right: 5rpx;
		margin-left: 10rpx; 
	}
	.commentItem{
		margin: 20rpx;
		padding: 20rpx;
		background-color: #fff;
		border-radius: 10rpx;
	}
	.userInfo{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.userInfo text{
		margin-left: 20rpx;
		color: #909399;
	}
	.reply{
		background-color: #f6f6f6;
		padding: 10rpx;
		border-radius: 10rpx;
	}
	.allBtn{
		text-align: center;
	}
	.goodsInfoPop{
		display: flex;
		padding: 20rpx 30rpx;
	}
	.goodsInfoPop image{
		width: 150rpx;
		height: 150rpx;
	}
	.infoRight{
		margin-left: 10rpx;
		width: 530rpx;
	}
	.pricebox_pop{
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #909399;
	}
	.pricePop{
		font-size: 40rpx;
		color: #FA3534;
	}
	.norm_item{
		padding: 20rpx 30rpx;
	}
	.confrim-btn{
		padding: 0 50rpx;
	} 
	.pop_num{
		padding: 20rpx 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.pintuanBtn{
		line-height: 36rpx;
		padding: 0 30rpx;
		border-radius: 36rpx;
		color: #ffffff;
		text-align: center;
	}
	.commentImg{
		display: flex;
		align-items: center;
		margin: 20rpx 0;
	}
	.commentImg image{
		width: 150rpx;
		height: 150rpx;
		margin-right: 10rpx;
	}
	.model_box{
		padding: 20rpx;
	}
	.model_title{
		font-size: 30rpx;
		font-weight: 700;
		padding: 0 0 10rpx;
	}
	.model_item{
		padding: 10rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		border-bottom:1rpx solid #e4e7ed;
	}
	.model_remark{
		font-size: 22rpx;
		margin-top: 10rpx;
		color: #909399;
	}
</style>
<style lang="scss" scoped>
.navigation {
	display: flex;
	margin-top: 100rpx;
	background-color: #ffffff;
	padding: 16rpx 16rpx;
	width: 750rpx;
	position: fixed;
	bottom: 0;
	z-index: 10;
	justify-content: space-between;
	.left {
		display: flex;
		font-size: 20rpx;
		.item {
			margin: 0 30rpx;
		}
	}
	.right {
		display: flex;
		font-size: 28rpx;
		align-items: center;
		.btn {
			line-height: 66rpx;
			padding: 0 30rpx;
			border-radius: 36rpx;
			color: #ffffff;
			text-align: center;
		}
		.cart {
			background: linear-gradient(90deg,#676869,#525252);
			margin-right: 30rpx;
		}
		.buy {
			background: linear-gradient(90deg,#13797f,#20cbd4);
		}
		.seckill {
			background: linear-gradient(93deg,#d01325,#ed3c30);
			width: 350rpx;
		}
	}
}
.myextension {
		background-color: #FFFFFF;
		overflow: hidden;
	}

	.myextension image {
		display: block;
	}

	.saveImg {
		width: 300upx;
		height: 80upx;
		border-radius: 40upx;
		box-shadow: 0 10upx 10upx #ddd;
		background-color: #20cbd4;
		line-height: 80upx;
		text-align: center;
		color: #fff;
		margin: 0 auto;
		margin-top: 880upx;
	}
	
	.saveImg1 {
		width: 300upx;
		height: 80upx;
		border-radius: 40upx;
		box-shadow: 0 10upx 10upx #ddd;
		background-color: #20cbd4;
		line-height: 80upx;
		text-align: center;
		color: #fff;
		margin: 0 auto;
		margin-top: 20upx;
	}

	.mycanvas {
		margin: 0 auto;
		transform: translateY(30upx);
		border-radius: 10upx;
		overflow: hidden;
	}

	.imgs {
		position: absolute;
		top: 30upx;
		left: 50%;
		transform: translateX(-50%);
		border-radius: 10upx;
		overflow: hidden;
	}
	.tips{
		text-align: center;
		color: #999;
		font-size: 24upx;
		margin-top: 1100upx;
	}
</style>
